import { dataSourceType } from '@/type.d';
import { ref, watch, nextTick } from "vue";
import { cloneDeep } from 'lodash'
import inputRule from '@/utils/inputRule';
export const useColumnModelSettings = (formState: dataSourceType, currentComp: dataSourceType, propsCopycurrentComp: dataSourceType) => {
  watch(() => currentComp, (newVal: any, oldVal: any) => {
    console.log(oldVal, 'oldVal');
    if (newVal.value.id) {
      propsCopycurrentComp.value = newVal.value;
      //console.log(propsCopycurrentComp.value, 'propsCopycurrentComp.value')
      let formSetting = newVal.value.formSetting || {};
      if (newVal.value.isShowScene) {
        newVal.value.formSetting && newVal.value.formSetting.children && newVal.value.formSetting.children.length && newVal.value.formSetting.children[newVal.value.formSetting.children.length - 1].param === 'scene' && newVal.value.formSetting.children.pop()
      }
      formState.value = Array.isArray(formSetting) ? newVal.value.formSetting : [newVal.value.formSetting];
    }

  }, {
    immediate: true, deep: true
  })
  let area = ''
  let detail = ''
  watch(() => cloneDeep(formState.value), (newVal: any, oldVal: any) => {
    if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
      newVal[0].children.forEach((item: dataSourceType) => {
        if (Array.isArray(propsCopycurrentComp.value)) {
          propsCopycurrentComp.value.forEach((pItem: dataSourceType) => {
            if (item.param === 'rule') {
              pItem[item.param].required = item.value;
            } else if (item.param == 'validator') {
              if (item.value) {
                pItem.rule[item.param] = cloneDeep(inputRule[item.value]);
              }
            } else if (item.param === 'scene') {
              pItem.value = item.value;
            } else if (item.param === 'imgSuggest') {
              propsCopycurrentComp.value[item.param] = item.minValue || item.maxValue ? `建议${item.minValue || ''} * ${item.maxValue || ''}PX` : '';
            } else if (item.param === 'defaultCity') {
              pItem.value = item.value[1]
            } else if (item.param === 'addressSelect' || item.param === 'addressDetail') {
              if (item.param === 'addressSelect') {
                area = (item.value[0] + item.value[1] + item.value[2])
              }
              if (item.param === 'addressDetail') {
                detail = item.value
              }
              pItem.value = area ? area : '' + detail ? detail : ''
            } else {
              pItem[item.param] = item.value;
              if (item.param_options) {
                pItem['options'] = item.options;
              }
            }
          })
        } else {
          if (item.param === 'rule') {
            if (propsCopycurrentComp.value[item.param]) {
              propsCopycurrentComp.value[item.param].required = item.value;
            } else {
              console.log(propsCopycurrentComp.value, item.param, 'propsCopycurrentComp.value, item.param');
            }

          } else if (item.param == 'validator') {
            if (item.value) {
              propsCopycurrentComp.value.rule[item.param] = inputRule[item.value];
            }

          }
          else if (item.param === 'scene') {
            if (item.value.length && item.value.length === 1) {
              if (item.value[0] === '会员注册') {
                propsCopycurrentComp.value.formSetting.children[propsCopycurrentComp.value.formSetting.children.length - 1].value = [...item.value, '会员个人资料页面']
                propsCopycurrentComp.value[item.param] = [...item.value, '会员个人资料页面']
              } else {
                propsCopycurrentComp.value.formSetting.children[propsCopycurrentComp.value.formSetting.children.length - 1].value = item.value
                propsCopycurrentComp.value[item.param] = item.value
              }
            } else {
              propsCopycurrentComp.value.value = ''
            }
          }
          else if (item.param === 'imgSuggest') {
            propsCopycurrentComp.value[item.param] = item.minValue || item.maxValue ? `建议${item.minValue || ''} * ${item.maxValue || ''}PX` : '';
          } else if (item.param === 'defaultCity') {
            propsCopycurrentComp.value.value = item.value[1]
          } else if (item.param === 'addressSelect' || item.param === 'addressDetail') {
            if (item.param === 'addressSelect') {
              area = item.value ? (item.value[0] + item.value[1] + item.value[2]) : ''
            }
            if (item.param === 'addressDetail') {
              detail = item.value
            }
            propsCopycurrentComp.value.value = (area ? area : '') + '-' + (detail ? detail : '')
          } else if (item.param === 'memberStatus') {
            propsCopycurrentComp.value.value = item.value;
          } else {
            //propsCopycurrentComp.value[item.param] = item.value;
            setTimeout(() => { // 会员离关闭新建弹窗，恢复值错误导致
              propsCopycurrentComp.value[item.param] = item.value;
              if (item.param == 'value') {
                console.log(propsCopycurrentComp.value, item, 'propsCopycurrentComp.value[item.param], item.value,');
              }
            }, 40)
            if (item.param_options) {
              //console.log(propsCopycurrentComp.value['options'], item.options, '(propsCopycurrentComp.value  item.options')
              propsCopycurrentComp.value['options'] = item.options;
            }
          }
        }
      })
    }
  }, { deep: true })
}
export const useColumnModel = (compConfig: dataSourceType, element: any) => {
  watch(() => element, (newVal: any, oldVal) => {
    if (newVal) {
      if (newVal.value.componentName === 'indexNumRuleIssueCode') {
        compConfig.value = { ...newVal.value, formInfo: compConfig.value };
      } if (newVal.value.componentName === 'indexNum') {
        compConfig.value = { ...newVal.value, formInfo: compConfig.value };
      } else {
        compConfig.value = newVal.value;
      }
    }
  }, { deep: true, immediate: true })
}

export const useColumnItem = (PformItem: dataSourceType, formItem: dataSourceType,) => {
  watch(() => cloneDeep(PformItem), (newVal, oldVal) => {
    formItem.value = newVal.value;
  }, { deep: true })
}
